<!DOCTYPE html>
<html lang="zh-Hans">
<head>

    <!--[if lt IE 9]>
        <style>body {display: none; background: none !important} </style>
        <meta http-equiv="Refresh" Content="0; url=//outdatedbrowser.com/" />
    <![endif]-->

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta name="author" content="FreeShow" />



<meta name="description" content="什么是WebRTC？众所周知，浏览器本身不支持相互之间直接建立信道进行通信，都是通过服务器进行中转。比如现在有两个客户端，甲和乙，他们俩想要通信，首先需要甲和服务器、乙和服务器之间建立信道。甲给乙发送消息时，甲先将消息发送到服务器上，服务器对甲的消息进行中转，发送到乙处，反过来也是一样。这样甲与乙之间的一次消息要通过两段信道，通信的效率同时受制于这两段信道的带宽。同时这样的信道并不适合数据流">
<meta property="og:type" content="article">
<meta property="og:title" content="使用WebRTC搭建前端视频聊天室——入门篇">
<meta property="og:url" content="https://freeshow.github.io/Communication/WebRTC/使用WebRTC搭建前端视频聊天室——入门篇/index.html">
<meta property="og:site_name" content="FreeShow">
<meta property="og:description" content="什么是WebRTC？众所周知，浏览器本身不支持相互之间直接建立信道进行通信，都是通过服务器进行中转。比如现在有两个客户端，甲和乙，他们俩想要通信，首先需要甲和服务器、乙和服务器之间建立信道。甲给乙发送消息时，甲先将消息发送到服务器上，服务器对甲的消息进行中转，发送到乙处，反过来也是一样。这样甲与乙之间的一次消息要通过两段信道，通信的效率同时受制于这两段信道的带宽。同时这样的信道并不适合数据流">
<meta property="og:image" content="http://img.blog.csdn.net/20160125105410161">
<meta property="og:image" content="http://img.blog.csdn.net/20160125142625278">
<meta property="og:image" content="http://img.blog.csdn.net/20160125142926731">
<meta property="og:updated_time" content="2017-03-28T09:03:01.413Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="使用WebRTC搭建前端视频聊天室——入门篇">
<meta name="twitter:description" content="什么是WebRTC？众所周知，浏览器本身不支持相互之间直接建立信道进行通信，都是通过服务器进行中转。比如现在有两个客户端，甲和乙，他们俩想要通信，首先需要甲和服务器、乙和服务器之间建立信道。甲给乙发送消息时，甲先将消息发送到服务器上，服务器对甲的消息进行中转，发送到乙处，反过来也是一样。这样甲与乙之间的一次消息要通过两段信道，通信的效率同时受制于这两段信道的带宽。同时这样的信道并不适合数据流">
<meta name="twitter:image" content="http://img.blog.csdn.net/20160125105410161">

<link rel="apple-touch-icon" href= "/apple-touch-icon.png">


    <link rel="alternate" href="/atom.xml" title="FreeShow" type="application/atom+xml">



    <link rel="shortcut icon" href="/favicon.ico">



    <link href="//cdn.bootcss.com/animate.css/3.5.1/animate.min.css" rel="stylesheet">



    <link href="//cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet">



    <script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
    <link href="//cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-minimal.css" rel="stylesheet">


<link rel="stylesheet" href="/css/style.css">



<link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">


<title>使用WebRTC搭建前端视频聊天室——入门篇 | FreeShow</title>

<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

<script>
    var yiliaConfig = {
        fancybox: true,
        animate: true,
        isHome: false,
        isPost: true,
        isArchive: false,
        isTag: false,
        isCategory: false,
        fancybox_js: "//cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.js",
        scrollreveal: "//cdn.bootcss.com/scrollReveal.js/3.1.4/scrollreveal.min.js",
        search: true
    }
</script>


    <script>
        yiliaConfig.jquery_ui = [true, "//cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.min.js", "//cdn.bootcss.com/jqueryui/1.10.4/css/jquery-ui.min.css"];
    </script>



    <script> yiliaConfig.rootUrl = "\/";</script>






</head>
<body>
  <div id="container">
    <div class="left-col">
    <div class="overlay"></div>
<div class="intrude-less">
    <header id="header" class="inner">
        <a href="/" class="profilepic">
            <img src="/img/avatar.png" class="animated zoomIn">
        </a>
        <hgroup>
          <h1 class="header-author"><a href="/">FreeShow</a></h1>
        </hgroup>

        
        <p class="header-subtitle">在追求艺术的道路上狂奔</p>
        

        
            <form id="search-form">
            <input type="text" id="local-search-input" name="q" placeholder="search..." class="search form-control" autocomplete="off" autocorrect="off" searchonload="false" />
            <i class="fa fa-times" onclick="resetSearch()"></i>
            </form>
            <div id="local-search-result"></div>
            <p class='no-result'>No results found <i class='fa fa-spinner fa-pulse'></i></p>
        


        
            <div id="switch-btn" class="switch-btn">
                <div class="icon">
                    <div class="icon-ctn">
                        <div class="icon-wrap icon-house" data-idx="0">
                            <div class="birdhouse"></div>
                            <div class="birdhouse_holes"></div>
                        </div>
                        <div class="icon-wrap icon-ribbon hide" data-idx="1">
                            <div class="ribbon"></div>
                        </div>
                        
                        <div class="icon-wrap icon-link hide" data-idx="2">
                            <div class="loopback_l"></div>
                            <div class="loopback_r"></div>
                        </div>
                        
                        
                        <div class="icon-wrap icon-me hide" data-idx="3">
                            <div class="user"></div>
                            <div class="shoulder"></div>
                        </div>
                        
                    </div>
                    
                </div>
                <div class="tips-box hide">
                    <div class="tips-arrow"></div>
                    <ul class="tips-inner">
                        <li>菜单</li>
                        <li>标签</li>
                        
                        <li>友情链接</li>
                        
                        
                        <li>关于我</li>
                        
                    </ul>
                </div>
            </div>
        

        <div id="switch-area" class="switch-area">
            <div class="switch-wrap">
                <section class="switch-part switch-part1">
                    <nav class="header-menu">
                        <ul>
                        
                            <li><a href="/">主页</a></li>
                        
                            <li><a href="/archives/">所有文章</a></li>
                        
                            <li><a href="/tags/">标签云</a></li>
                        
                            <li><a href="/about/">关于我</a></li>
                        
                        </ul>
                    </nav>
                    <nav class="header-nav">
                        <ul class="social">
                            
                                <a class="fa Email" href="mailto:877646746@qq.com" title="Email"></a>
                            
                                <a class="fa GitHub" href="http://github.com/freeshow" title="GitHub"></a>
                            
                                <a class="fa 新浪微博" href="http://weibo.com/freeshowself" title="新浪微博"></a>
                            
                                <a class="fa CSDN" href="http://blog.csdn.net/u011026329" title="CSDN"></a>
                            
                        </ul>
                    </nav>
                </section>
                
                
                <section class="switch-part switch-part2">
                    <div class="widget tagcloud" id="js-tagcloud">
                        <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Android/">Android</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/C/">C</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Crawler/">Crawler</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Hadoop/">Hadoop</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Hexo/">Hexo</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Java/">Java</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Linux/">Linux</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Python/">Python</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/SIP/">SIP</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Scala/">Scala</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Shell/">Shell</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Spark/">Spark</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Tools/">Tools</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/WebRTC/">WebRTC</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/XMPP/">XMPP</a></li></ul>
                    </div>
                </section>
                
                
                
                <section class="switch-part switch-part3">
                    <div id="js-friends">
                    
                      <a class="main-nav-link switch-friends-link" href="https://hexo.io">Hexo</a>
                    
                      <a class="main-nav-link switch-friends-link" href="https://github.com/freeshow">GitHub</a>
                    
                      <a class="main-nav-link switch-friends-link" href="http://freeshow.github.io/">FreeShow</a>
                    
                    </div>
                </section>
                

                
                
                <section class="switch-part switch-part4">
                
                    <div id="js-aboutme">我是一个喜欢无拘无束、追求自由、热爱分享的小小小码农！</div>
                </section>
                
            </div>
        </div>
    </header>                
</div>
    </div>
    <div class="mid-col">
      <nav id="mobile-nav">
      <div class="overlay">
          <div class="slider-trigger"></div>
          <h1 class="header-author js-mobile-header hide"><a href="/" title="回到主页">FreeShow</a></h1>
      </div>
    <div class="intrude-less">
        <header id="header" class="inner">
            <a href="/" class="profilepic">
                <img src="/img/avatar.png" class="animated zoomIn">
            </a>
            <hgroup>
              <h1 class="header-author"><a href="/" title="回到主页">FreeShow</a></h1>
            </hgroup>
            
            <p class="header-subtitle">在追求艺术的道路上狂奔</p>
            
            <nav class="header-menu">
                <ul>
                
                    <li><a href="/">主页</a></li>
                
                    <li><a href="/archives/">所有文章</a></li>
                
                    <li><a href="/tags/">标签云</a></li>
                
                    <li><a href="/about/">关于我</a></li>
                
                <div class="clearfix"></div>
                </ul>
            </nav>
            <nav class="header-nav">
                        <ul class="social">
                            
                                <a class="fa Email" target="_blank" href="mailto:877646746@qq.com" title="Email"></a>
                            
                                <a class="fa GitHub" target="_blank" href="http://github.com/freeshow" title="GitHub"></a>
                            
                                <a class="fa 新浪微博" target="_blank" href="http://weibo.com/freeshowself" title="新浪微博"></a>
                            
                                <a class="fa CSDN" target="_blank" href="http://blog.csdn.net/u011026329" title="CSDN"></a>
                            
                        </ul>
            </nav>
        </header>                
    </div>
    <link class="menu-list" tags="标签" friends="友情链接" about="关于我"/>
</nav>
      <div class="body-wrap"><article id="post-Communication/WebRTC/使用WebRTC搭建前端视频聊天室——入门篇" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/Communication/WebRTC/使用WebRTC搭建前端视频聊天室——入门篇/" class="article-date">
      <time datetime="2016-07-23T10:46:02.000Z" itemprop="datePublished">2016-07-23</time>
</a>


    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      使用WebRTC搭建前端视频聊天室——入门篇
    </h1>
  

      </header>
      
      <div class="article-info article-info-post">
        
    <div class="article-category tagcloud">
    <a class="article-category-link" href="/categories/网络通信/">网络通信</a>
    </div>


        
    <div class="article-tag tagcloud">
        <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/WebRTC/">WebRTC</a></li></ul>
    </div>

        <div class="clearfix"></div>
      </div>
      
    
    <div class="article-entry" itemprop="articleBody">
      
          
        <excerpt in="" index="" |="" 首页摘要=""> 

<h2 id="什么是WebRTC？"><a href="#什么是WebRTC？" class="headerlink" title="什么是WebRTC？"></a>什么是WebRTC？</h2><p>众所周知，浏览器本身不支持相互之间直接建立信道进行通信，都是通过服务器进行中转。比如现在有两个客户端，甲和乙，他们俩想要通信，首先需要甲和服务器、乙和服务器之间建立信道。甲给乙发送消息时，甲先将消息发送到服务器上，服务器对甲的消息进行中转，发送到乙处，反过来也是一样。这样甲与乙之间的一次消息要通过两段信道，通信的效率同时受制于这两段信道的带宽。同时这样的信道并不适合数据流的传输，如何建立浏览器之间的点对点传输，一直困扰着开发者。WebRTC应运而生</p>
<a id="more"></a>
<the rest="" of="" contents="" |="" 余下全文="">

<p>WebRTC是一个开源项目，旨在使得浏览器能为实时通信（RTC）提供简单的JavaScript接口。说的简单明了一点就是让浏览器提供JS的即时通信接口。这个接口所创立的信道并不是像WebSocket一样，打通一个浏览器与WebSocket服务器之间的通信，而是通过一系列的信令，建立一个浏览器与浏览器之间（peer-to-peer）的信道，这个信道可以发送任何数据，而不需要经过服务器。并且WebRTC通过实现MediaStream，通过浏览器调用设备的摄像头、话筒，使得浏览器之间可以传递音频和视频</p>
<h2 id="WebRTC已经在我们的浏览器中"><a href="#WebRTC已经在我们的浏览器中" class="headerlink" title="WebRTC已经在我们的浏览器中"></a>WebRTC已经在我们的浏览器中</h2><p>这么好的功能，各大浏览器厂商自然不会置之不理。现在WebRTC已经可以在较新版的Chrome、Opera和Firefox中使用了，著名的浏览器兼容性查询网站caniuse上给出了一份详尽的浏览器兼容情况</p>
<p><img src="http://img.blog.csdn.net/20160125105410161" alt="这里写图片描述"></p>
<p>另外根据36Kr前段时间的新闻<a href="http://36kr.com/p/205614.html" target="_blank" rel="external">Google 推出支持 WebRTC 及 Web Audio 的 Android 版 Chrome 29</a>和<a href="http://36kr.com/p/210209.html" target="_blank" rel="external">Android 版 Opera 开始支持 WebRTC，允许用户在没有任何插件的情况下实现语音和视频聊天</a></p>
<h2 id="三个接口"><a href="#三个接口" class="headerlink" title="三个接口"></a>三个接口</h2><hr>
<p>WebRTC实现了三个API，分别是:</p>
<ul>
<li>MediaStream：通过MediaStream的API能够通过设备的摄像头及话筒获得视频、音频的同步流</li>
<li>RTCPeerConnection：RTCPeerConnection是WebRTC用于构建点对点之间稳定、高效的流传输的组件</li>
<li>RTCDataChannel：RTCDataChannel使得浏览器之间（点对点）建立一个高吞吐量、低延时的信道，用于传输任意数据</li>
</ul>
<p>这里大致上介绍一下这三个API</p>
<h2 id="MediaStream（getUserMedia）"><a href="#MediaStream（getUserMedia）" class="headerlink" title="MediaStream（getUserMedia）"></a>MediaStream（getUserMedia）</h2><p>MediaStream API为WebRTC提供了从设备的摄像头、话筒获取视频、音频流数据的功能</p>
<h2 id="W3C标准"><a href="#W3C标准" class="headerlink" title="W3C标准"></a>W3C标准</h2><p><a href="http://w3c.github.io/mediacapture-main/getusermedia.html" target="_blank" rel="external">W3C标准传送门</a></p>
<h2 id="如何调用"><a href="#如何调用" class="headerlink" title="如何调用"></a>如何调用</h2><p>同门可以通过调用navigator.getUserMedia()，这个方法接受三个参数：</p>
<ol>
<li>一个约束对象（constraints object），这个后面会单独讲</li>
<li>一个调用成功的回调函数，如果调用成功，传递给它一个流对象</li>
<li>一个调用失败的回调函数，如果调用失败，传递给它一个错误对象</li>
</ol>
<h2 id="浏览器兼容性"><a href="#浏览器兼容性" class="headerlink" title="浏览器兼容性"></a>浏览器兼容性</h2><p>由于浏览器实现不同，他们经常会在实现标准版本之前，在方法前面加上前缀，所以一个兼容版本就像这样</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">var getUserMedia = (navigator.getUserMedia || </div><div class="line">                    navigator.webkitGetUserMedia || </div><div class="line">                    navigator.mozGetUserMedia || </div><div class="line">                    navigator.msGetUserMedia);</div></pre></td></tr></table></figure>
<h2 id="一个超级简单的例子"><a href="#一个超级简单的例子" class="headerlink" title="一个超级简单的例子"></a>一个超级简单的例子</h2><hr>
<p>这里写一个超级简单的例子，用来展现getUserMedia的效果：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div></pre></td><td class="code"><pre><div class="line">&lt;!doctype html&gt;</div><div class="line">&lt;html lang=&quot;zh-CN&quot;&gt;</div><div class="line">&lt;head&gt;</div><div class="line">    &lt;meta charset=&quot;UTF-8&quot;&gt;</div><div class="line">    &lt;title&gt;GetUserMedia实例&lt;/title&gt;</div><div class="line">&lt;/head&gt;</div><div class="line">&lt;body&gt;</div><div class="line">    &lt;video id=&quot;video&quot; autoplay&gt;&lt;/video&gt;</div><div class="line">&lt;/body&gt;</div><div class="line"></div><div class="line"></div><div class="line">&lt;script type=&quot;text/javascript&quot;&gt;</div><div class="line">    var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);</div><div class="line"></div><div class="line">    getUserMedia.call(navigator, &#123;</div><div class="line">        video: true,</div><div class="line">        audio: true</div><div class="line">    &#125;, function(localMediaStream) &#123;</div><div class="line">        var video = document.getElementById(&apos;video&apos;);</div><div class="line">        video.src = window.URL.createObjectURL(localMediaStream);</div><div class="line">        video.onloadedmetadata = function(e) &#123;</div><div class="line">            console.log(&quot;Label: &quot; + localMediaStream.label);</div><div class="line">            console.log(&quot;AudioTracks&quot; , localMediaStream.getAudioTracks());</div><div class="line">            console.log(&quot;VideoTracks&quot; , localMediaStream.getVideoTracks());</div><div class="line">        &#125;;</div><div class="line">    &#125;, function(e) &#123;</div><div class="line">        console.log(&apos;Reeeejected!&apos;, e);</div><div class="line">    &#125;);</div><div class="line">&lt;/script&gt;</div><div class="line"></div><div class="line"></div><div class="line">&lt;/html&gt;</div></pre></td></tr></table></figure>
<p>将这段内容保存在一个HTML文件中，放在服务器上。用较新版本的Opera、Firefox、Chrome打开，在浏览器弹出询问是否允许访问摄像头和话筒，选同意，浏览器上就会出现摄像头所拍摄到的画面了</p>
<p>注意，HTML文件要放在服务器上，否则会得到一个NavigatorUserMediaError的错误，显示PermissionDeniedError，最简单方法就是cd到HTML文件所在目录下，然后python -m SimpleHTTPServer（装了python的话），然后在浏览器中输入<a href="http://localhost:8000/{文件名称}.html" target="_blank" rel="external">http://localhost:8000/{文件名称}.html</a></p>
<p>这里使用<strong>getUserMedia</strong>获得流之后，需要将其输出，一般是绑定到<strong>video</strong>标签上输出，需要使用<strong>window.URL.createObjectURL(localMediaStream)</strong>来创造能在video中使用src属性播放的Blob URL，注意在video上加入autoplay属性，否则只能捕获到一张图片</p>
<p>流创建完毕后可以通过label属性来获得其唯一的标识，还可以通过<strong>getAudioTracks()</strong>和<strong>getVideoTracks()</strong>方法来获得流的追踪对象数组（如果没有开启某种流，它的追踪对象数组将是一个空数组）</p>
<h2 id="约束对象（Constraints）"><a href="#约束对象（Constraints）" class="headerlink" title="约束对象（Constraints）"></a>约束对象（Constraints）</h2><p>约束对象可以被设置在getUserMedia()和RTCPeerConnection的addStream方法中，这个约束对象是WebRTC用来指定接受什么样的流的，其中可以定义如下属性：</p>
<ul>
<li>video: 是否接受视频流</li>
<li>audio：是否接受音频流</li>
<li>MinWidth: 视频流的最小宽度</li>
<li>MaxWidth：视频流的最大宽度</li>
<li>MinHeight：视频流的最小高度</li>
<li>MaxHiehgt：视频流的最大高度</li>
<li>MinAspectRatio：视频流的最小宽高比</li>
<li>MaxAspectRatio：视频流的最大宽高比</li>
<li>MinFramerate：视频流的最小帧速率</li>
<li>MaxFramerate：视频流的最大帧速率</li>
</ul>
<p>详情见<a href="http://tools.ietf.org/html/draft-alvestrand-constraints-resolution-00" target="_blank" rel="external">这里写链接内容</a></p>
<h2 id="RTCPeerConnection"><a href="#RTCPeerConnection" class="headerlink" title="RTCPeerConnection"></a>RTCPeerConnection</h2><hr>
<p>WebRTC使用RTCPeerConnection来在浏览器之间传递流数据，这个流数据通道是点对点的，不需要经过服务器进行中转。但是这并不意味着我们能抛弃服务器，我们仍然需要它来为我们传递信令（signaling）来建立这个信道。WebRTC没有定义用于建立信道的信令的协议：信令并不是RTCPeerConnection API的一部分</p>
<h3 id="信令"><a href="#信令" class="headerlink" title="信令"></a>信令</h3><p>既然没有定义具体的信令的协议，我们就可以选择任意方式（AJAX、WebSocket），采用任意的协议（SIP、XMPP）来传递信令，建立信道，比如我写的<a href="https://github.com/LingyuCoder/SkyRTC-demo" target="_blank" rel="external">demo</a>，就是用的node的ws模块，在WebSocket上传递信令</p>
<p>需要信令来交换的信息有三种：</p>
<ul>
<li>session的信息：用来初始化通信还有报错</li>
<li>网络配置：比如IP地址和端口啥的</li>
<li>媒体适配：发送方和接收方的浏览器能够接受什么样的编码器和分辨率</li>
</ul>
<p>这些信息的交换应该在点对点的流传输之前就全部完成，一个大致的架构图如下：<br><img src="http://img.blog.csdn.net/20160125142625278" alt="这里写图片描述"></p>
<h3 id="通过服务器建立信道"><a href="#通过服务器建立信道" class="headerlink" title="通过服务器建立信道"></a>通过服务器建立信道</h3><p>这里再次重申，就算WebRTC提供浏览器之间的点对点信道进行数据传输，但是建立这个信道，必须有服务器的参与。WebRTC需要服务器对其进行四方面的功能支持：</p>
<ol>
<li>用户发现以及通信</li>
<li>信令传输</li>
<li>NAT/防火墙穿越</li>
<li>如果点对点通信建立失败，可以作为中转服务器</li>
</ol>
<h3 id="NAT-防火墙穿越技术"><a href="#NAT-防火墙穿越技术" class="headerlink" title="NAT/防火墙穿越技术"></a>NAT/防火墙穿越技术</h3><p>建立点对点信道的一个常见问题，就是NAT穿越技术。在处于使用了NAT设备的私有TCP/IP网络中的主机之间需要建立连接时需要使用NAT穿越技术。以往在VoIP领域经常会遇到这个问题。目前已经有很多NAT穿越技术，但没有一项是完美的，因为NAT的行为是非标准化的。这些技术中大多使用了一个公共服务器，这个服务使用了一个从全球任何地方都能访问得到的IP地址。在RTCPeeConnection中，使用ICE框架来保证RTCPeerConnection能实现NAT穿越</p>
<p>ICE，全名叫交互式连接建立（Interactive Connectivity Establishment）,一种综合性的NAT穿越技术，它是一种框架，可以整合各种NAT穿越技术如STUN、TURN（Traversal Using Relay NAT 中继NAT实现的穿透）。ICE会先使用STUN，尝试建立一个基于UDP的连接，如果失败了，就会去TCP（先尝试HTTP，然后尝试HTTPS），如果依旧失败ICE就会使用一个中继的TURN服务器。</p>
<p>我们可以使用Google的STUN服器：<strong>stun:stun.l.google.com:19302</strong>，于是乎，一个整合了ICE框架的架构应该长这个样子<br><img src="http://img.blog.csdn.net/20160125142926731" alt="这里写图片描述"></p>
<h3 id="浏览器兼容"><a href="#浏览器兼容" class="headerlink" title="浏览器兼容"></a>浏览器兼容</h3><p>还是前缀不同的问题，采用和上面类似的方法：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">var PeerConnection = (window.PeerConnection ||</div><div class="line">                    window.webkitPeerConnection00 || </div><div class="line">                    window.webkitRTCPeerConnection || </div><div class="line">                    window.mozRTCPeerConnection);</div></pre></td></tr></table></figure>
<h3 id="创建和使用"><a href="#创建和使用" class="headerlink" title="创建和使用"></a>创建和使用</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div></pre></td><td class="code"><pre><div class="line">//使用Google的stun服务器</div><div class="line">var iceServer = &#123;</div><div class="line">    &quot;iceServers&quot;: [&#123;</div><div class="line">        &quot;url&quot;: &quot;stun:stun.l.google.com:19302&quot;</div><div class="line">    &#125;]</div><div class="line">&#125;;</div><div class="line">//兼容浏览器的getUserMedia写法</div><div class="line">var getUserMedia = (navigator.getUserMedia ||</div><div class="line">                    navigator.webkitGetUserMedia || </div><div class="line">                    navigator.mozGetUserMedia || </div><div class="line">                    navigator.msGetUserMedia);</div><div class="line">//兼容浏览器的PeerConnection写法</div><div class="line">var PeerConnection = (window.PeerConnection ||</div><div class="line">                    window.webkitPeerConnection00 || </div><div class="line">                    window.webkitRTCPeerConnection || </div><div class="line">                    window.mozRTCPeerConnection);</div><div class="line">//与后台服务器的WebSocket连接</div><div class="line">var socket = __createWebSocketChannel();</div><div class="line">//创建PeerConnection实例</div><div class="line">var pc = new PeerConnection(iceServer);</div><div class="line">//发送ICE候选到其他客户端</div><div class="line">pc.onicecandidate = function(event)&#123;</div><div class="line">    socket.send(JSON.stringify(&#123;</div><div class="line">        &quot;event&quot;: &quot;__ice_candidate&quot;,</div><div class="line">        &quot;data&quot;: &#123;</div><div class="line">            &quot;candidate&quot;: event.candidate</div><div class="line">        &#125;</div><div class="line">    &#125;));</div><div class="line">&#125;;</div><div class="line">//如果检测到媒体流连接到本地，将其绑定到一个video标签上输出</div><div class="line">pc.onaddstream = function(event)&#123;</div><div class="line">    someVideoElement.src = URL.createObjectURL(event.stream);</div><div class="line">&#125;;</div><div class="line">//获取本地的媒体流，并绑定到一个video标签上输出，并且发送这个媒体流给其他客户端</div><div class="line">getUserMedia.call(navigator, &#123;</div><div class="line">    &quot;audio&quot;: true,</div><div class="line">    &quot;video&quot;: true</div><div class="line">&#125;, function(stream)&#123;</div><div class="line">    //发送offer和answer的函数，发送本地session描述</div><div class="line">    var sendOfferFn = function(desc)&#123;</div><div class="line">            pc.setLocalDescription(desc);</div><div class="line">            socket.send(JSON.stringify(&#123; </div><div class="line">                &quot;event&quot;: &quot;__offer&quot;,</div><div class="line">                &quot;data&quot;: &#123;</div><div class="line">                    &quot;sdp&quot;: desc</div><div class="line">                &#125;</div><div class="line">            &#125;));</div><div class="line">        &#125;,</div><div class="line">        sendAnswerFn = function(desc)&#123;</div><div class="line">            pc.setLocalDescription(desc);</div><div class="line">            socket.send(JSON.stringify(&#123; </div><div class="line">                &quot;event&quot;: &quot;__answer&quot;,</div><div class="line">                &quot;data&quot;: &#123;</div><div class="line">                    &quot;sdp&quot;: desc</div><div class="line">                &#125;</div><div class="line">            &#125;));</div><div class="line">        &#125;;</div><div class="line">    //绑定本地媒体流到video标签用于输出</div><div class="line">    myselfVideoElement.src = URL.createObjectURL(stream);</div><div class="line">    //向PeerConnection中加入需要发送的流</div><div class="line">    pc.addStream(stream);</div><div class="line">    //如果是发送方则发送一个offer信令，否则发送一个answer信令</div><div class="line">    if(isCaller)&#123;</div><div class="line">        pc.createOffer(sendOfferFn);</div><div class="line">    &#125; else &#123;</div><div class="line">        pc.createAnswer(sendAnswerFn);</div><div class="line">    &#125;</div><div class="line">&#125;, function(error)&#123;</div><div class="line">    //处理媒体流创建失败错误</div><div class="line">&#125;);</div><div class="line">//处理到来的信令</div><div class="line">socket.onmessage = function(event)&#123;</div><div class="line">    var json = JSON.parse(event.data);</div><div class="line">    //如果是一个ICE的候选，则将其加入到PeerConnection中，否则设定对方的session描述为传递过来的描述</div><div class="line">    if( json.event === &quot;__ice_candidate&quot; )&#123;</div><div class="line">        pc.addIceCandidate(new RTCIceCandidate(json.data.candidate));</div><div class="line">    &#125; else &#123;</div><div class="line">         pc.setRemoteDescription(new RTCSessionDescription(json.data.sdp));</div><div class="line">    &#125;</div><div class="line">&#125;;</div></pre></td></tr></table></figure>
<h3 id="实例"><a href="#实例" class="headerlink" title="实例"></a>实例</h3><p>由于涉及较为复杂灵活的信令传输，故这里不做简短的实例，可以直接移步到最后</p>
<h2 id="RTCDataChannel"><a href="#RTCDataChannel" class="headerlink" title="RTCDataChannel"></a>RTCDataChannel</h2><hr>
<p>既然能建立点对点的信道来传递实时的视频、音频数据流，为什么不能用这个信道传一点其他数据呢？RTCDataChannel API就是用来干这个的，基于它我们可以在浏览器之间传输任意数据。DataChannel是建立在PeerConnection上的，不能单独使用</p>
<h3 id="使用DataChannel"><a href="#使用DataChannel" class="headerlink" title="使用DataChannel"></a>使用DataChannel</h3><p>我们可以使用channel = pc.createDataCHannel(“someLabel”);来在PeerConnection的实例上创建Data Channel，并给与它一个标签</p>
<p>DataChannel使用方式几乎和WebSocket一样，有几个事件：</p>
<ul>
<li>onopen</li>
<li>onclose</li>
<li>onmessage</li>
<li>onerror</li>
</ul>
<p>同时它有几个状态，可以通过readyState获取：</p>
<ul>
<li>connecting: 浏览器之间正在试图建立channel</li>
<li>open：建立成功，可以使用send方法发送数据了</li>
<li>closing：浏览器正在关闭channel</li>
<li>closed：channel已经被关闭了</li>
</ul>
<p>两个暴露的方法:</p>
<ul>
<li>close(): 用于关闭channel</li>
<li>send()：用于通过channel向对方发送数据</li>
</ul>
<h3 id="通过Data-Channel发送文件大致思路"><a href="#通过Data-Channel发送文件大致思路" class="headerlink" title="通过Data Channel发送文件大致思路"></a>通过Data Channel发送文件大致思路</h3><p>JavaScript已经提供了File API从input[ type= ‘file’]的元素中提取文件，并通过FileReader来将文件的转换成DataURL，这也意味着我们可以将DataURL分成多个碎片来通过Channel来进行文件传输</p>
<h2 id="一个综合的Demo"><a href="#一个综合的Demo" class="headerlink" title="一个综合的Demo"></a>一个综合的Demo</h2><hr>
<p><a href="https://github.com/LingyuCoder/SkyRTC-demo" target="_blank" rel="external">SkyRTC-demo</a>，这是我写的一个Demo。建立一个视频聊天室，并能够广播文件，当然也支持单对单文件传输，写得还很粗糙，后期会继续完善</p>
<h3 id="使用方式"><a href="#使用方式" class="headerlink" title="使用方式"></a>使用方式</h3><ol>
<li>下载解压并cd到目录下</li>
<li>运行npm install安装依赖的库（express, ws, node-uuid）</li>
<li>运行node server.js，访问localhost:3000，允许摄像头访问</li>
<li>打开另一台电脑，在浏览器（Chrome和Opera，还未兼容Firefox）打开{server所在IP}:3000，允许摄像头和话筒访问</li>
<li>广播文件：在左下角选定一个文件，点击“发送文件”按钮</li>
<li>广播信息：左下角input框输入信息，点击发送</li>
<li>可能会出错，注意F12对话框，一般F5能解决</li>
</ol>
<h3 id="功能"><a href="#功能" class="headerlink" title="功能"></a>功能</h3><p>视频音频聊天（连接了摄像头和话筒，至少要有摄像头），广播文件（可单独传播，提供API，广播就是基于单独传播实现的，可同时传播多个，小文件还好说，大文件坐等内存吃光），广播聊天信息</p>
<h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><ul>
<li><a href="https://webrtc.org/" target="_blank" rel="external">WebRTC官方网站</a></li>
<li><a href="http://w3c.github.io/mediacapture-main/getusermedia.html" target="_blank" rel="external">W3C-GetUserMedia</a></li>
<li><a href="http://w3c.github.io/webrtc-pc/" target="_blank" rel="external">W3C-WebRTC</a></li>
<li><a href="http://www.html5rocks.com/en/tutorials/getusermedia/intro/" target="_blank" rel="external">Capturing Audio &amp; Video in HTML5@html5rocks</a></li>
<li><a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/" target="_blank" rel="external">Getting Started with WebRTC@html5rocks</a></li>
<li><a href="http://caniuse.com/" target="_blank" rel="external">caniuse</a></li>
<li><a href="http://zh.wikipedia.org/wiki/%E4%BA%92%E5%8B%95%E5%BC%8F%E9%80%A3%E6%8E%A5%E5%BB%BA%E7%AB%8B" target="_blank" rel="external">ICE交互式连接建立</a></li>
</ul>
<p>转载自：<a href="http://segmentfault.com/a/1190000000436544" target="_blank" rel="external">使用WebRTC搭建前端视频聊天室——入门篇</a></p>
</the></excerpt>
      
    </div>
    
  </div>
  
    
    <div class="copyright">
        <p><span>本文标题:</span><a href="/Communication/WebRTC/使用WebRTC搭建前端视频聊天室——入门篇/">使用WebRTC搭建前端视频聊天室——入门篇</a></p>
        <p><span>文章作者:</span><a href="/" title="回到主页">FreeShow</a></p>
        <p><span>发布时间:</span>2016-07-23, 18:46:02</p>
        <p><span>最后更新:</span>2017-03-28, 17:03:01</p>
        <p>
            <span>原始链接:</span><a class="post-url" href="/Communication/WebRTC/使用WebRTC搭建前端视频聊天室——入门篇/" title="使用WebRTC搭建前端视频聊天室——入门篇">https://freeshow.github.io/Communication/WebRTC/使用WebRTC搭建前端视频聊天室——入门篇/</a>
            <span class="copy-path" data-clipboard-text="原文: https://freeshow.github.io/Communication/WebRTC/使用WebRTC搭建前端视频聊天室——入门篇/　　作者: FreeShow" title="点击复制文章链接"><i class="fa fa-clipboard"></i></span>
            <script> var clipboard = new Clipboard('.copy-path'); </script>
        </p>
        <p>
            <span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" title="CC BY-NC-SA 4.0 International" target = "_blank">"署名-非商用-相同方式共享 4.0"</a> 转载请保留原文链接及作者。
        </p>
    </div>



    <nav id="article-nav">
        
            <div id="article-nav-newer" class="article-nav-title">
                <a href="/Programming/Shell/Shell编程（一）/">
                    Shell编程（一）
                </a>
            </div>
        
        
            <div id="article-nav-older" class="article-nav-title">
                <a href="/Comprehensive/BuildBlog/更改Yelee主题标签云为球形标签云/">
                    更改Yelee主题标签云为球形标签云
                </a>
            </div>
        
    </nav>

  
</article>

    <div id="toc" class="toc-article">
        <strong class="toc-title">文章目录</strong>
        
            <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#什么是WebRTC？"><span class="toc-number">1.</span> <span class="toc-text">什么是WebRTC？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#WebRTC已经在我们的浏览器中"><span class="toc-number">2.</span> <span class="toc-text">WebRTC已经在我们的浏览器中</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#三个接口"><span class="toc-number">3.</span> <span class="toc-text">三个接口</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#MediaStream（getUserMedia）"><span class="toc-number">4.</span> <span class="toc-text">MediaStream（getUserMedia）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#W3C标准"><span class="toc-number">5.</span> <span class="toc-text">W3C标准</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#如何调用"><span class="toc-number">6.</span> <span class="toc-text">如何调用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#浏览器兼容性"><span class="toc-number">7.</span> <span class="toc-text">浏览器兼容性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#一个超级简单的例子"><span class="toc-number">8.</span> <span class="toc-text">一个超级简单的例子</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#约束对象（Constraints）"><span class="toc-number">9.</span> <span class="toc-text">约束对象（Constraints）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#RTCPeerConnection"><span class="toc-number">10.</span> <span class="toc-text">RTCPeerConnection</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#信令"><span class="toc-number">10.1.</span> <span class="toc-text">信令</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#通过服务器建立信道"><span class="toc-number">10.2.</span> <span class="toc-text">通过服务器建立信道</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#NAT-防火墙穿越技术"><span class="toc-number">10.3.</span> <span class="toc-text">NAT/防火墙穿越技术</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#浏览器兼容"><span class="toc-number">10.4.</span> <span class="toc-text">浏览器兼容</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#创建和使用"><span class="toc-number">10.5.</span> <span class="toc-text">创建和使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#实例"><span class="toc-number">10.6.</span> <span class="toc-text">实例</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#RTCDataChannel"><span class="toc-number">11.</span> <span class="toc-text">RTCDataChannel</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#使用DataChannel"><span class="toc-number">11.1.</span> <span class="toc-text">使用DataChannel</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#通过Data-Channel发送文件大致思路"><span class="toc-number">11.2.</span> <span class="toc-text">通过Data Channel发送文件大致思路</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#一个综合的Demo"><span class="toc-number">12.</span> <span class="toc-text">一个综合的Demo</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#使用方式"><span class="toc-number">12.1.</span> <span class="toc-text">使用方式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#功能"><span class="toc-number">12.2.</span> <span class="toc-text">功能</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#参考资料"><span class="toc-number">13.</span> <span class="toc-text">参考资料</span></a></li></ol>
        
    </div>
    <style>
        .left-col .switch-btn,
        .left-col .switch-area {
            display: none;
        }
        .toc-level-3 i,
        .toc-level-3 ol {
            display: none !important;
        }
    </style>

    <input type="button" id="tocButton" value="隐藏目录"  title="点击按钮隐藏或者显示文章目录">

    <script>
        yiliaConfig.toc = ["隐藏目录", "显示目录", !!"false"];
    </script>



    
<div class="share">
    
        <div class="bdsharebuttonbox">
            <a href="#" class="fa fa-twitter bds_twi" data-cmd="twi" title="分享到推特"></a>
            <a href="#" class="fa fa-weibo bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
            <a href="#" class="fa fa-qq bds_sqq" data-cmd="sqq" title="分享给 QQ 好友"></a>
            <a href="#" class="fa fa-files-o bds_copy" data-cmd="copy" title="复制网址"></a>
            <a href="#" class="fa fa fa-envelope-o bds_mail" data-cmd="mail" title="通过邮件分享"></a>
            <a href="#" class="fa fa-weixin bds_weixin" data-cmd="weixin" title="生成文章二维码"></a>
            <a href="#" class="fa fa-share-alt bds_more" data-cmd="more"></i></a>
        </div>
        <script>
            window._bd_share_config={
                "common":{"bdSnsKey":{},"bdText":"使用WebRTC搭建前端视频聊天室——入门篇　| FreeShow　","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
        </script>
    

    
</div>







    
      <div class="duoshuo" id="comments">
    <div id="comment-box" ></div>
    <div class="ds-thread" id="ds-thread" data-thread-key="Communication/WebRTC/使用WebRTC搭建前端视频聊天室——入门篇/" data-title="使用WebRTC搭建前端视频聊天室——入门篇" data-url="https://freeshow.github.io/Communication/WebRTC/使用WebRTC搭建前端视频聊天室——入门篇/"></div>
    <script>
        var duoshuoQuery = {short_name:"freeshowgithub"};
        var loadComment = function(){
            var d = document, s = d.createElement('script');
            s.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
            s.async = true; s.charset = 'UTF-8';
            (d.head || d.body).appendChild(s);
        }

        
    </script>
    
    <script> loadComment(); </script>

</div>
    




    <div class="scroll" id="post-nav-button">
        
            <a href="/Programming/Shell/Shell编程（一）/" title="上一篇: Shell编程（一）">
                <i class="fa fa-angle-left"></i>
            </a>
        

        <a title="文章列表"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a>

        
            <a href="/Comprehensive/BuildBlog/更改Yelee主题标签云为球形标签云/" title="下一篇: 更改Yelee主题标签云为球形标签云">
                <i class="fa fa-angle-right"></i>
            </a>
        
    </div>

    <ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/BigData/Hadoop/Hadoop分布式集群安装/">Hadoop分布式集群安装</a></li><li class="post-list-item"><a class="post-list-link" href="/BigData/Hive/Hive应用实例：WordCount/">Hive应用实例：WordCount</a></li><li class="post-list-item"><a class="post-list-link" href="/BigData/Hive/Hive安装/">Hive安装</a></li><li class="post-list-item"><a class="post-list-link" href="/BigData/Hadoop/Windows下使用eclipse插件运行自己的MapReduce程序/">Windows下使用Eclipse插件运行自己的MapReduce程序</a></li><li class="post-list-item"><a class="post-list-link" href="/BigData/Hadoop/MapReduce之去重计数类应用/">MapReduce之去重计数类应用</a></li><li class="post-list-item"><a class="post-list-link" href="/BigData/Hadoop/MapReduce之简单排序类应用/">MapReduce之简单排序类应用</a></li><li class="post-list-item"><a class="post-list-link" href="/BigData/Hadoop/MapReduce之连接操作类应用/">MapReduce之连接操作类应用</a></li><li class="post-list-item"><a class="post-list-link" href="/BigData/Hadoop/MapReduce之计数类应用/">MapReduce之计数类应用</a></li><li class="post-list-item"><a class="post-list-link" href="/BigData/Hadoop/MapReduce之二次排序类应用/">MapReduce之二次排序类应用</a></li><li class="post-list-item"><a class="post-list-link" href="/BigData/Hadoop/MapReduce之倒排索引类应用/">MapReduce之倒排索引类应用</a></li><li class="post-list-item"><a class="post-list-link" href="/BigData/Hadoop/HDFS Java API/">HDFS Java API</a></li><li class="post-list-item"><a class="post-list-link" href="/BigData/Kafka/Kafka集群安装/">Kafka集群安装</a></li><li class="post-list-item"><a class="post-list-link" href="/BigData/Hadoop/Windows下使用eclipse编译打包运行自己的MapReduce程序 Hadoop2.6.0/">Windows下使用eclipse编译打包运行自己的MapReduce程序 Hadoop2.6.0</a></li><li class="post-list-item"><a class="post-list-link" href="/BigData/ZooKeeper/ZooKeeper集群安装/">ZooKeeper集群安装</a></li><li class="post-list-item"><a class="post-list-link" href="/BigData/Spark/Spark安装和集群部署/">Spark安装和集群部署</a></li><li class="post-list-item"><a class="post-list-link" href="/Comprehensive/BuildBlog/GitHub Pages + Hexo搭建个人博客/">GitHub Pages + Hexo搭建个人博客</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Python/Python爬虫实例：登录豆瓣并修改签名/">Python爬虫实例：登录豆瓣并修改签名</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Python/Python爬虫实例：用requests重构豆瓣热播电影爬虫/">Python爬虫实例：用requests重构豆瓣热播电影爬虫</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Python/Python爬虫实例：豆瓣热播电影/">Python爬虫实例：豆瓣热播电影（urllib+urllib2）</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Python/Python爬虫之requests介绍/">Python爬虫之requests介绍</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Python/Python爬虫之urllib2介绍/">Python爬虫之urllib2介绍</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Python/Python爬虫之urllib介绍/">Python爬虫之urllib介绍</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Python/Cookie介绍/">Cookie介绍</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Python/Python爬虫实例：从百度图片下载壁纸/">Python爬虫实例：从百度图片下载壁纸</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Python/Python线程/">Python线程</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Python/XPath与多线程爬虫/">XPath与多线程爬虫</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Python/Python之正则表达式/">Python之正则表达式</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Python/Python爬虫实例：唐诗三百首/">Python爬虫实例：唐诗三百首</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Python/Python爬虫进阶/">Python爬虫进阶</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Python/Python初步使用scrapy/">Python初步使用Scrapy</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Python/Python开发简单爬虫之实战演练/">Python开发简单爬虫之实战演练</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Python/Python开发简单爬虫之爬虫介绍（一）/">Python开发简单爬虫之爬虫介绍</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/FreeSwitch/FreeSwitch压力测试/">FreeSwitch压力测试</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/FreeSwitch/FreeSwitch使用mod-xml-curl提供动态用户管理/">FreeSwitch使用mod_xml_curl提供动态用户管理</a></li><li class="post-list-item"><a class="post-list-link" href="/Comprehensive/Tools/Win10下MarkdownPad安装及问题/">Win10下MarkdownPad安装及问题</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Linux/Ubuntu14-04安装Apache-php5-mysql-phpmyadmin/">Ubuntu14.04安装Apache+php5+mysql+phpmyadmin</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/C/Linux下C语言入门准备/">Linux下C语言入门准备</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Linux/vi编辑器/">vi编辑器</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Shell/Shell简单介绍/">Shell简单介绍</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Linux/linux基础（四）/">linux基础（四）</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Linux/Linux基础（三）/">Linux基础（三）</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Linux/Linux基础（二）/">Linux基础（二）</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Linux/Ubuntu Server 14.04 静态IP简单配置/">Ubuntu Server 14.04 静态IP简单配置</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Linux/Linux基础（一）/">Linux基础（一）</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之Handler详解（一）-关联到UI线程/">Android之Handler详解（一）---关联到UI线程</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之Handler详解（二）-关联到非UI线程/">Android之Handler详解（二）---关联到非UI线程</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之更新UI的方法/">Android之更新UI的方法</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之延迟执行某个任务/">Android之延迟执行某个任务</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/AndroidStudio之环境设置 /">初次安装AndroidStudio之环境设置</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Java/java里如何正确计算检验和/">java里如何正确计算检验和</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之AsyncTask介绍/">Android之AsyncTask介绍</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之Fragment（一）-简介/">Android之Fragment（一）--简介</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之Fragment（二）-使用/">Android之Fragment（二）--使用</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之Fragment（三）-生命周期与回退栈/">Android之Fragment（三）--生命周期与回退栈</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Java/Java运行时多态性：继承和接口的实现/">Java运行时多态性：继承和接口的实现</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之Fragment（四）-Fragment与Activity通讯/">Android之Fragment（四）--Fragment与Activity通讯</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之RAM、ROM和SD卡/">Android之RAM、ROM和SD卡</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之使用全局变量的两种方法/">Android之使用全局变量的两种方法</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之数据存储-SharedPreference/">Android之数据存储--SharedPreference</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之数据存储-File内部存储/">Android之数据存储--File内部存储</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之数据存储-外部存储（SD卡）/">Android之数据存储--外部存储（SD卡）</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之音频播放（MediaPlayer和SoundPool）/">Android之音频播放（MediaPlayer和SoundPool）</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之话筒、听筒、扬声器/">Android之话筒、听筒、扬声器</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之数据存数-SQLite数据库/">Android之数据存数--SQLite数据库</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之AdapterView及子类/">Android之AdapterView及子类</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之ListView和ListActivity-ArrayAdapter/">Android之ListView和ListActivity--ArrayAdapter</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之列表视图（LitView）-SimpleAdapter/">Android之列表视图（LitView）--SimpleAdapter</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之列表视图（LstView）-BaseAdapter/">Android之列表视图（LstView）--BaseAdapter</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之自动完成文本框（AutoCompleteTextView）/">Android之自动完成文本框（AutoCompleteTextView）</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之网格视图（GridView）/">Android之网格视图（GridView）</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之可扩展的列表组件（ExpandableListView）/">Android之可扩展的列表组件（ExpandableListView）</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/ListView的性能优化之convertView和viewHolder/">ListView的性能优化之convertView和viewHolder</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/android-layout-weight的真实含义/">android:layout_weight的真实含义</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Android/Android之使用9Patch图片作为背景/">Android之使用9Patch图片作为背景</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Java/Java综述/">Java综述</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Java/Java之数据类型、变量和数组/">Java之数据类型、变量和数组</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Java/Java之运算符/">Java之运算符</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Java/Java之控制语句/">Java之控制语句</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Java/Java之类/">Java之类</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Java/Java之方法和类的深入分析/">Java之方法和类的深入分析</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Java/Java之继承/">Java之继承</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Java/Java之包和接口/">Java之包和接口</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Java/Java之异常处理/">Java之异常处理</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Java/Java之多线程编程/">Java之多线程编程</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Java/Java之枚举、自动装箱与注解（元数据）/">Java之枚举、自动装箱与注解（元数据）</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Java/Java之I-O以及其它主题/">Java之I/O以及其它主题</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Java/Java之lambda表达式/">Java之lambda表达式</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Java/Java之字符串处理/">Java之字符串处理</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Java/Java之集合框架/">Java之集合框架</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Scala/Scala访问控制修饰符/">Scala访问控制修饰符</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Scala/Scala类/">Scala类</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Scala/Scala函数（一）/">Scala函数（一）</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Scala/Scala函数（二）/">Scala函数（二）</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Scala/Scala单例对象/">Scala单例对象</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/WebRTC/使用WebRTC搭建前端视频聊天室——信令篇/">使用WebRTC搭建前端视频聊天室——信令篇</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/WebRTC/使用WebRTC搭建前端视频聊天室——数据通道篇/">使用WebRTC搭建前端视频聊天室——数据通道篇</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/WebRTC/使用WebRTC搭建前端视频聊天室——点对点通信篇/">使用WebRTC搭建前端视频聊天室——点对点通信篇</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/WebRTC/WebRTC工作流程/">WebRTC工作流程</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/WebRTC/Android之WebRTC实现/">Android之WebRTC实现</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/WebRTC/Android之WebRTC介绍（二）/">Android之WebRTC介绍（二）</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/WebRTC/Android之WebRTC介绍（一）/">Android之WebRTC介绍（一）</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/WebRTC/WebRTC之turn服务器搭建/">WebRTC之turn服务器搭建</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/XMPP/openfire之SSL认证/">openfire之SSL认证</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/XMPP/基于openfire-smack开发Android即时聊天应用-一-用户注册、登陆、修改密码、注销等/">基于openfire+smack开发Android即时聊天应用[一]-用户注册、登陆、修改密码、注销等</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/OpenSIPs/ubuntu下opensips安装配置/">ubuntu下opensips安装配置</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Linux/计算机是如何启动的？/">计算机是如何启动的？</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Linux/Linux的启动流程/">Linux的启动流程</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/XMPP/Smack Message属性扩展---添加自定义元素(标签)/">Smack Message属性扩展--添加自定义元素（标签）</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/DataStructure/线性表-顺序表/">线性表---顺序表</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/SIP/SIP对话流程/">SIP对话流程</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/SIP/SIP服务器类型/">SIP服务器类型</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/SIP/SIP注册过程/">SIP注册过程</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/OpenSIPs/openSIPS路由类型/">openSIPS路由类型</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/OpenSIPs/opensips函数/">opensips函数</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/SIP/SIP路由字段和机理/">SIP路由字段和机理</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/OpenSIPs/opensips-csipsimple出现的各种问题/">opensips+csipsimple出现的各种问题</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/OpenSIPs/opensips介绍/">opensips介绍</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Shell/Shell编程（八）-输入输出重定向、文件包含/">Shell编程（八）---输入输出重定向、文件包含</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Shell/Shell编程（七）-函数/">Shell编程（七）---函数</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Shell/Shell编程（六）-循环/">Shell编程（六）---循环</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Shell/Shell编程（五）-if、case/">Shell编程（五）---if、case</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Shell/Shell编程（四）-echo、printf/">Shell编程（四）---echo、printf</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Shell/Shell编程（三）-字符串、数组/">Shell编程（三）---字符串、数组</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Shell/Shell编程（二）-替换、运算符、注释/">Shell编程（二）---替换、运算符、注释</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Shell/Shell编程（一）/">Shell编程（一）</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/WebRTC/使用WebRTC搭建前端视频聊天室——入门篇/">使用WebRTC搭建前端视频聊天室——入门篇</a></li><li class="post-list-item"><a class="post-list-link" href="/Comprehensive/BuildBlog/更改Yelee主题标签云为球形标签云/">更改Yelee主题标签云为球形标签云</a></li><li class="post-list-item"><a class="post-list-link" href="/Communication/FreeSwitch/FreeSwitch安装文档/">FreeSwitch安装文档</a></li><li class="post-list-item"><a class="post-list-link" href="/Comprehensive/BuildBlog/Hexo主题Yelee介绍/">Hexo主题Yelee介绍</a></li><li class="post-list-item"><a class="post-list-link" href="/Programming/Linux/Ubuntu14-04安装JDK与配置环境变量/">Ubuntu14.04安装JDK与配置环境变量</a></li></ul>




    <script>
        
    </script>
</div>
      <footer id="footer">
    <div class="outer">
        <div id="footer-info">
            <div class="footer-left">
                <i class="fa fa-copyright"></i> 
                2016-2017 FreeShow
            </div>
            <div class="footer-right">
                <a href="http://hexo.io/" target="_blank" title="快速、简洁且高效的博客框架">Hexo</a>  Theme <a href="https://github.com/MOxFIVE/hexo-theme-yelee" target="_blank" title="简而不减 Hexo 双栏博客主题  v3.5">Yelee</a> by MOxFIVE <i class="fa fa-heart animated infinite pulse"></i>
            </div>
        </div>
        
            <div class="visit">
                
                    <span id="busuanzi_container_site_pv" style='display:none'>
                        <span id="site-visit" title="本站到访数"><i class="fa fa-user" aria-hidden="true"></i><span id="busuanzi_value_site_uv"></span>
                        </span>
                    </span>
                
                
                    <span>| </span>
                
                
                    <span id="busuanzi_container_page_pv" style='display:none'>
                        <span id="page-visit"  title="本页阅读量"><i class="fa fa-eye animated infinite pulse" aria-hidden="true"></i><span id="busuanzi_value_page_pv"></span>
                        </span>
                    </span>
                
            </div>
        
    </div>
</footer>
    </div>
    
    <script src="/js/GithubRepoWidget.js"></script>

<script data-main="/js/main.js" src="//cdn.bootcss.com/require.js/2.2.0/require.min.js"></script>

    <script>
        $(document).ready(function() {
            var iPad = window.navigator.userAgent.indexOf('iPad');
            if (iPad > -1 || $(".left-col").css("display") === "none") {
                var bgColorList = ["#9db3f4", "#414141", "#e5a859", "#f5dfc6", "#c084a0", "#847e72", "#cd8390", "#996731"];
                var bgColor = Math.ceil(Math.random() * (bgColorList.length - 1));
                $("body").css({"background-color": bgColorList[bgColor], "background-size": "cover"});
            }
            else {
                var backgroundnum = 5;
                var backgroundimg = "url(/background/bg-x.jpg)".replace(/x/gi, Math.ceil(Math.random() * backgroundnum));
                $("body").css({"background": backgroundimg, "background-attachment": "fixed", "background-size": "cover"});
            }
        })
    </script>





    <script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
        processEscapes: true,
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    }
});

MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i=0; i < all.length; i += 1) {
        all[i].SourceElement().parentNode.className += ' has-jax';                 
    }       
});
</script>

<script src="//cdn.bootcss.com/mathjax/2.6.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>


<div class="scroll" id="scroll">
    <a href="#" title="返回顶部"><i class="fa fa-arrow-up"></i></a>
    <a href="#comments" onclick="load$hide();" title="查看评论"><i class="fa fa-comments-o"></i></a>
    <a href="#footer" title="转到底部"><i class="fa fa-arrow-down"></i></a>
</div>
<script>
    // Open in New Window
    
        var oOpenInNew = {
             github: ".github-widget a", 
            
            
            
            
            
             archives: ".archive-article-title", 
             miniArchives: "a.post-list-link", 
            
             friends: "#js-friends a", 
             socail: ".social a" 
        }
        for (var x in oOpenInNew) {
            $(oOpenInNew[x]).attr("target", "_blank");
        }
    
</script>

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
  </div>
</body>
</html>